﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>AFT Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html
        {
            height: 100%;
        }
        body
        {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
        #map_canvas
        {
            height: 100%;
        }
    </style>
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
        var map;
        var latlng;
        var lat;
        var lng;
        var zoom;
        var geocoder;

        function initialize() {
            lat = 37.2714577;
            lng = 127.02815529999998;
            zoom = 11;
            latlng = new google.maps.LatLng(lat, lng);
            geocoder = new google.maps.Geocoder();
            var myOptions = {
                zoom: 11,
                center: latlng,
                //mapTypeId: google.maps.MapTypeId.SATELLITE
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }

        function panCoordinate(x, y) {
            try {
                lat = x;
                lng = y;

                map.panTo(new google.maps.LatLng(lat, lng));

            } catch (e) {
                window.alert("panning error");
            }
            //check_marker();
            codeCoordinate();
        }
        /*
        function check_marker() {
        var marker = new google.maps.Marker({
        position: map.getCenter(),
        map: map,
        title: map.getCenter() + ""
        });

        }
        */
        function codeCoordinate() {
            var marker;
            geocoder.geocode({ 'latLng': latlng }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[1]) {
                        marker = new google.maps.Marker({
                            map: map,
                            position: map.getCenter(),
                            title: results[1].formatted_address
                        });
                    }
                    else {
                        map.setCenter(results[0].geometry.location);
                        marker = new google.maps.Marker({
                            map: map,
                            position: map.getCenter()
                        });
                    }
                }
            });
        }


        function codeAddress(pos) {
            //var address = document.getElementById("address").value;
            //address = pos;
            var address = pos;
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location,
                        title: address
                    });
                } else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });
        }

    </script>
</head>
<body onload="initialize()">
    <div id="map_canvas" style="width: 100%; height: 100%">
    </div>
</body>
</html>
